<template>
  <!-- 标签 -->
  <div class="w-full p-4 mb-3 bg-white border border-gray-200 shadow rounded-lg dark:bg-gray-800 dark:border-gray-700">
    <!-- 标签标题 -->
    <h2 class="flex items-center mb-2 font-bold text-gray-900 uppercase dark:text-white">
      <svg t="1710663365270" class="icon w-5 h-5 mr-2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="13737" width="200" height="200">
        <path
            d="M525.76 167.936L851.2 486.72c54.272 53.184 56 140.032 3.84 195.2l-160.32 169.6a139.328 139.328 0 0 1-198.08 4.544L170.496 540.992A139.328 139.328 0 0 1 128 440.832v-198.4c0-33.28 23.488-61.824 56.064-68.352l216.96-43.264a139.328 139.328 0 0 1 124.736 37.12z m200.128 374.08a34.24 34.24 0 0 0-48 1.664l-138.88 146.56a33.088 33.088 0 0 0 1.664 47.168c13.76 12.608 35.136 11.904 48-1.664l138.88-146.496a33.152 33.152 0 0 0-1.664-47.232z m-111.36-105.856a34.24 34.24 0 0 0-48 1.664L427.648 584.32a33.28 33.28 0 0 0 1.6 47.232c13.824 12.608 35.2 11.84 48-1.728l138.88-146.432a33.28 33.28 0 0 0-1.6-47.232zM398.016 316.096c-37.504 0-67.904 29.888-67.904 66.816 0 36.864 30.4 66.752 67.84 66.752 37.568 0 67.968-29.888 67.968-66.752 0-36.928-30.4-66.816-67.904-66.816z"
            fill="#FF8F49" p-id="13738"></path>
      </svg>
      标签
    </h2>
    <!-- 标签列表 -->
    <span v-for="item in tagList" :key="item.id"
          @click="gotoTag(item.id, item.name)"
          :class="[item.id == currentTagId ? 'bg-blue-300' : 'bg-blue-100']"
          class="cursor-pointer  inline-block mb-1 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded hover:bg-blue-200 hover:text-blue-900 dark:bg-blue-900 dark:text-blue-300">
      {{ item.name }}
    </span>
  </div>
</template>

<script setup>
import {queryTagList} from "@/api/frontend/tag.js"
import {onMounted, ref} from "vue"
import {useRoute, useRouter} from "vue-router";

const route = useRoute()
const router = useRouter()
const currentTagId = ref()
const tagList = ref([])

onMounted(() => {
  const path = route.fullPath.split("?")
  if (path[0] == "/tag/article/list") {
    currentTagId.value = route.query.id
  }
  getTagList()
})

function getTagList() {
  queryTagList().then(resp => {
        if (resp.success) {
          tagList.value = resp.data
        }
      }
  )
}

const gotoTag = (id, name) => {
  router.push({path: "/tag/article/list", query: {id, name}})
  currentTagId.value = id
}

</script>
